Quasar is a popular Vue UI library for developing good looking Vue apps.
In this article, we’ll take a look at how to create Vue apps with the Quasar UI library.
Custom Carousel Controls
We can add custom carousel controls by populating the control slot.
To do this, we write:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-layout
view="lHh Lpr lFf"
container
style="height: 100vh;"
class="shadow-2 rounded-borders"
>
<q-carousel
swipeable
animated
v-model="slide"
:autoplay="autoplay"
ref="carousel"
infinite
>
<q-carousel-slide
:name="1"
img-src="https://cdn.quasar.dev/img/mountains.jpg"
>
</q-carousel-slide>
<q-carousel-slide
:name="2"
img-src="https://cdn.quasar.dev/img/parallax1.jpg"
>
</q-carousel-slide>
<q-carousel-slide
:name="3"
img-src="https://cdn.quasar.dev/img/parallax2.jpg"
>
</q-carousel-slide>
<template v-slot:control>
<q-carousel-control
position="top-right"
:offset="[18, 18]"
class="text-white rounded-borders"
style="background: rgba(0, 0, 0, 0.3); padding: 4px 8px;"
>
<q-toggle
dense
dark
color="orange"
v-model="autoplay"
label="Auto Play"
>
</q-toggle>
</q-carousel-control>
<q-carousel-control
position="bottom-right"
:offset="[18, 18]"
class="q-gutter-xs"
>
<q-btn
push
round
dense
color="orange"
text-color="black"
icon="arrow_left"
@click="$refs.carousel.previous()"
>
</q-btn>
<q-btn
push
round
dense
color="orange"
text-color="black"
icon="arrow_right"
@click="$refs.carousel.next()"
>
</q-btn>
</q-carousel-control>
</template>
</q-carousel>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
slide: 1,
autoplay: false
}
});
</script>
</body>
</html>
We add the position prop to position the control slot.
offset moves the slot to the left and down.
We use the class to set the colors.
We have the q-toggle component to set the autoplay reactive property to set the autoplay prop.
And we have the q-btn components to let us navigate the slides with the previous and next methods.
Chat Message
We can add the q-chat-message component to add chat message bubbles.
For instance, we can write:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-layout
view="lHh Lpr lFf"
container
style="height: 100vh;"
class="shadow-2 rounded-borders"
>
<div style="width: 100%; max-width: 400px;">
<q-chat-message :text="['hey, how are you?']" sent></q-chat-message>
<q-chat-message :text="['doing fine, how r you?']"></q-chat-message>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
slide: 1,
autoplay: false
}
});
</script>
</body>
</html>
We set the text prop to an array of strings.
The sent prop is added to the message of the chat message of the sender.
Also, we can add the name prop to add the name of the person that sent the message:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-layout
view="lHh Lpr lFf"
container
style="height: 100vh;"
class="shadow-2 rounded-borders"
>
<div style="width: 100%; max-width: 400px;">
<q-chat-message
:text="['hey, how are you?']"
sent
name="me"
></q-chat-message>
<q-chat-message
:text="['doing fine, how r you?']"
name="James"
></q-chat-message>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
slide: 1,
autoplay: false
}
});
</script>
</body>
</html>
Conclusion
We can add carousels with custom controls and add chat messages into our Vue app with Quasar.
